<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 直接在{{}}去写表达式，从可读可写可维护的角度不友好, 表达式要尽可能的简单 -->
      <!-- <p>{{ msg.split("").reverse().join("") }}</p> -->

      <!-- 通过methods方法的方式 -->
      <!-- <p>{{ reverseMsg() }}</p>
      <p>{{ reverseMsg() }}</p>
      <p>{{ reverseMsg() }}</p>
      <p>{{ reverseMsg() }}</p> -->

      <p>{{ reverseMsg }}</p>
      <p>{{ reverseMsg }}</p>
      <p>{{ reverseMsg }}</p>
      <p>{{ reverseMsg }}</p>

      <p>{{ msg }}</p>

      <hr />

      <p>num: {{ num }}</p>
      <p>doubleNum: {{ doubleNum }}</p>
      <button v-on:click="num++">btn</button>

      <hr />

      <ul>
        <li v-for="item in oddList">{{ item }}</li>
      </ul>

      <hr />

      <p>{{getTime}}</p>
    </div>

    <script src="./Vue3.js"></script>
    <script>
      const { createApp } = Vue;

      // 计算属性可以通过响应式数据作为依赖，从而计算得到一个新的值，同时又不改变响应式的依赖，这个值可以直接用，并且具有缓存
      // 计算属性本身不能被修改，只有所依赖的响应式数据发生改变，才会重新计算
      createApp({
        data() {
          return {
            msg: "hello Vue!",
            num: 2,
            list: [1, 2, 3, 4, 5, 6, 7],
            time: 0,
            count: 10,
          };
        },
        // methods: {
        //   reverseMsg() {
        //     console.log(123);
        //     return this.msg.split("").reverse().join("");
        //   },
        // },
        // 计算属性
        // 计算属性里面写的是函数, 必须要有return
        // 计算属性在用的时候，用的是函数的返回值，看起来是函数，可以当作属性来使用
        // 计算属性是有缓存的，缓存的就是return的值
        // 计算属性的值是不能被更改的, 只有改变计算属性的依赖，才能让函数再次执行
        // 计算属性里面需要立马return，里面不能写异步
        // 计算属性是可以同时依赖多个响应式数据的,也可以依赖其他的计算属性
        computed: {
          reverseMsg() {
            console.log(124);
            // data的值，被称为计算属性的依赖
            return this.msg.split("").reverse().join("");
          },
          doubleNum() {
            // setTimeout(() => {
            return this.num * 2 + this.count;
            // }, 1000);
          },
          oddList() {
            return this.list.filter((item) => item % 2);
          },
          getTime() {
            var date = new Date(this.time);
            var Y = date.getFullYear();
            var M = date.getMonth() + 1;
            var D = date.getDate();
            var hour = date.getHours();
            var min = date.getMinutes();
            var sec = date.getSeconds();
            return (
              Y +
              "-" +
              (M < 10 ? "0" + M : M) +
              "-" +
              (D < 10 ? "0" + D : D) +
              " " +
              (hour < 10 ? "0" + hour : hour) +
              ":" +
              (min < 10 ? "0" + min : min) +
              ":" +
              (sec < 10 ? "0" + sec : sec)
            );
          },
        },
        mounted() {
          // setTimeout(() => {
          //   // this.reverseMsg = "hi";
          //   this.msg = "hi";
          // }, 2000);

          this.time = new Date().getTime();
          setInterval(() => {
            this.time = new Date().getTime();
          }, 1000);
        },
      }).mount("#app");
    </script>
  </body>
</html>
